<template>
  <div class="community-list-container">
    <!-- 统计卡片区域 -->
    <div class="stats-cards">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card shadow="hover" class="stats-card">
            <div class="stats-content">
            <div class="stats-icon total-communities">
              <el-icon><House /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-title">小区总数</div>
                <div class="stats-value">12</div>
                <div class="stats-trend">
                  <span class="trend-up"><el-icon><ArrowUp /></el-icon>8.5%</span>
                  <span class="trend-text">较上月</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stats-card">
            <div class="stats-content">
            <div class="stats-icon total-buildings">
              <el-icon><OfficeBuilding /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-title">总栋数</div>
                <div class="stats-value">156</div>
                <div class="stats-trend">
                  <span class="trend-up"><el-icon><ArrowUp /></el-icon>12.3%</span>
                  <span class="trend-text">较上月</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stats-card">
            <div class="stats-content">
            <div class="stats-icon total-homes">
                <el-icon><HomeFilled /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-title">总户数</div>
                <div class="stats-value">4,568</div>
                <div class="stats-trend">
                  <span class="trend-up"><el-icon><ArrowUp /></el-icon>5.2%</span>
                  <span class="trend-text">较上月</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" class="stats-card">
            <div class="stats-content">
            <div class="stats-icon recent-added">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="stats-info">
              <div class="stats-title">本月新增</div>
                <div class="stats-value">3</div>
                <div class="stats-trend">
                  <span class="trend-down"><el-icon><ArrowDown /></el-icon>25%</span>
                  <span class="trend-text">较上月</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 搜索和操作区域 -->
    <el-card class="search-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>小区搜索</span>
          <div class="header-operations">
            <el-button type="primary" @click="handleAdd" plain>
              <el-icon><Plus /></el-icon>添加小区
            </el-button>
            <el-button type="danger" @click="handleBatchDelete" :disabled="multipleSelection.length === 0" plain>
              <el-icon><Delete /></el-icon>批量删除
            </el-button>
            <el-button type="success" @click="handleExport" plain>
              <el-icon><Download /></el-icon>导出Excel
            </el-button>
            <el-button type="warning" @click="handleImport" plain>
              <el-icon><Upload /></el-icon>导入Excel
            </el-button>
          </div>
        </div>
      </template>
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="小区名称">
          <el-input v-model="searchForm.name" placeholder="请输入小区名称" clearable>
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch">查询</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 表格区域 -->
    <el-card class="table-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>小区列表</span>
          <el-tag type="info">共 {{ total }} 条记录</el-tag>
        </div>
      </template>
      
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        stripe
        border
        highlight-current-row
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        :empty-text="'暂无小区数据'"
      >
        <el-table-column type="selection" width="55" fixed="left" />
        <el-table-column prop="id" label="ID" width="60" fixed="left" />
        <el-table-column prop="name" label="小区名称" width="150" fixed="left">
          <template #default="scope">
            <div class="community-name">
              <el-icon><House /></el-icon>
              <span>{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="坐落地址" min-width="180">
          <template #default="scope">
            <el-tooltip :content="scope.row.address" placement="top" :show-after="500">
              <div class="address-cell">
                <el-icon><Location /></el-icon>
                <span>{{ scope.row.address }}</span>
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="area" label="占地面积" width="120">
          <template #default="scope">
            {{ scope.row.area }} m²
          </template>
        </el-table-column>
        <el-table-column prop="totalBuildings" label="总栋数" width="90">
          <template #default="scope">
            <el-tag size="small" effect="plain">{{ scope.row.totalBuildings }} 栋</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="totalHomes" label="总户数" width="90">
          <template #default="scope">
            <el-tag size="small" type="success" effect="plain">{{ scope.row.totalHomes }} 户</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="developerName" label="开发商名称" width="150" />
        <el-table-column prop="propertyCompany" label="物业公司" width="150" />
        <el-table-column prop="createdAt" label="创建时间" width="200">
          <template #default="scope">
            <div class="time-cell">
              <el-icon><Calendar /></el-icon>
              {{ formatDate(scope.row.createdAt) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)" type="primary" text>
              <el-icon><Edit /></el-icon>编辑
            </el-button>
            <el-button size="small" @click="handleDelete(scope.row)" type="danger" text>
              <el-icon><Delete /></el-icon>删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-box">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </div>
    </el-card>

    <!-- 导入Excel对话框 -->
    <el-dialog v-model="importDialogVisible" title="导入Excel" width="500px">
      <div class="import-dialog-content">
        <el-alert
          title="请先下载模板，按照模板格式填写数据后上传"
          type="info"
          :closable="false"
          style="margin-bottom: 20px;"
        />
        
        <div class="template-download">
          <el-button type="primary" @click="downloadTemplate" size="small">
            <el-icon><Download /></el-icon>下载模板
          </el-button>
        </div>
        
        <el-upload
          class="excel-upload"
          action="#"
          :auto-upload="false"
          :on-change="handleFileChange"
          :file-list="fileList"
          :limit="1"
          accept=".xlsx,.xls"
        >
          <el-button type="primary">选择文件</el-button>
          <template #tip>
            <div class="el-upload__tip">只能上传xlsx/xls文件</div>
          </template>
        </el-upload>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitImport" :loading="importing">
            导入
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { 
  Plus, 
  Edit, 
  Delete, 
  Search, 
  House, 
  Location, 
  Calendar, 
  OfficeBuilding,
  ArrowUp,
  ArrowDown,
  HomeFilled,
  Download,
  Upload
} from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';
import ExcelUtil from '@/utils/ExcelUtil';

export default {
  name: 'CommunityList',
  components: {
    Plus,
    Edit,
    Delete,
    Search,
    House,
    Location,
    Calendar,
    OfficeBuilding,
    ArrowUp,
    ArrowDown,
    HomeFilled,
    Download,
    Upload
  },
  data() {
    return {
      searchForm: {
        name: ''
      },
      tableData: [],
      multipleSelection: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: false,
      statistics: {
        totalCommunities: 0,
        totalBuildings: 0,
        totalHomes: 0,
        recentAdded: 0
      },
      importDialogVisible: false,
      fileList: [],
      importing: false,
      exportLoading: false
    };
  },
  created() {
    this.fetchCommunities();
    this.fetchStatistics();
  },
  methods: {
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return date.toLocaleString();
    },
    async fetchStatistics() {
      try {
        const response = await axios.get('/api/communities/statistics');
        this.statistics = response.data;
      } catch (error) {
        console.error('Failed to fetch statistics:', error);
        ElMessage.error('获取统计数据失败');
      }
    },
    async fetchCommunities() {
      try {
        this.loading = true;
        const params = {
          page: this.currentPage - 1, // Spring Boot分页从0开始
          size: this.pageSize,
          sort: "id,desc"
        };
        
        // 如果有搜索条件，添加到参数中
        if (this.searchForm.name) {
          params.name = this.searchForm.name;
        }
        
        const response = await axios.get('/api/communities', { params });
        
        // 处理分页响应
        if (response.data && response.data.content) {
          this.tableData = response.data.content;
          this.total = response.data.totalItems || response.data.totalElements;
        } else if (Array.isArray(response.data)) {
          this.tableData = response.data;
          this.total = response.data.length;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      } catch (error) {
        console.error('Failed to fetch communities:', error);
        ElMessage.error('获取小区列表失败');
      } finally {
        this.loading = false;
      }
    },
    getTotalBuildings() {
      return this.tableData.reduce((sum, item) => sum + (item.totalBuildings || 0), 0);
    },
    getTotalHomes() {
      return this.tableData.reduce((sum, item) => sum + (item.totalHomes || 0), 0);
    },
    getRecentAdded() {
      const now = new Date();
      const firstDay = new Date(now.getFullYear(), now.getMonth(), 1);
      return this.tableData.filter(item => new Date(item.createdAt) >= firstDay).length;
    },
    async onSearch() {
      this.currentPage = 1; // 重置为第一页
      this.fetchCommunities();
    },
    resetSearch() {
      this.searchForm.name = '';
      this.fetchCommunities();
    },
    handleAdd() {
      this.$router.push('/property/community/add');
    },
    handleEdit(row) {
      this.$router.push({
        path: '/property/community/add',
        query: { id: row.id }
      });
    },
    async handleDelete(row) {
      try {
        await ElMessageBox.confirm(`确认要删除小区 ${row.name} 吗？`, '警告', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        });
        await axios.delete(`/api/communities/${row.id}`);
        ElMessage.success('删除成功');
        this.fetchCommunities();
      } catch (error) {
        if (error !== 'cancel') {
          console.error('Delete failed:', error);
          ElMessage.error('删除失败');
        } else {
          ElMessage.info('已取消删除');
        }
      }
    },
    async handleBatchDelete() {
      if (this.multipleSelection.length === 0) {
        ElMessage.warning('请至少选择一条记录');
        return;
      }
      try {
        await ElMessageBox.confirm(
          `确认要删除选中的 ${this.multipleSelection.length} 条记录吗？`,
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        );
        const deleteRequests = this.multipleSelection.map(item =>
          axios.delete(`/api/communities/${item.id}`)
        );
        await Promise.all(deleteRequests);
        ElMessage.success('批量删除成功');
        this.fetchCommunities();
      } catch (error) {
        if (error !== 'cancel') {
          console.error('Batch delete failed:', error);
          ElMessage.error('批量删除失败');
        } else {
          ElMessage.info('已取消删除');
        }
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchCommunities();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchCommunities();
    },
    // 导出Excel
    async handleExport() {
      try {
        this.exportLoading = true;
        
        // 定义表头
        const header = [
          { label: '小区名称', prop: 'name' },
          { label: '坐落地址', prop: 'address' },
          { label: '占地面积(m²)', prop: 'area' },
          { label: '总栋数', prop: 'totalBuildings' },
          { label: '总户数', prop: 'totalHomes' },
          { label: '开发商名称', prop: 'developerName' },
          { label: '物业公司', prop: 'propertyCompany' }
        ];
        
        // 获取所有数据
        const response = await axios.get('/api/communities/all');
        const data = response.data;
        
        // 导出Excel
        ExcelUtil.exportExcel(data, '小区信息表', header);
        
        ElMessage.success('导出成功');
      } catch (error) {
        console.error('导出失败:', error);
        ElMessage.error('导出失败: ' + (error.message || '未知错误'));
      } finally {
        this.exportLoading = false;
      }
    },
    
    // 打开导入对话框
    handleImport() {
      this.importDialogVisible = true;
      this.fileList = [];
    },
    
    // 下载导入模板
    async downloadTemplate() {
      try {
        // 创建模板数据
        const templateData = [
          {
            name: '阳光花园',
            address: '北京市朝阳区阳光路123号',
            area: '50000',
            totalBuildings: '10',
            totalHomes: '500',
            developerName: '阳光地产',
            propertyCompany: '阳光物业'
          }
        ];
        
        // 定义表头
        const header = [
          { label: '小区名称', prop: 'name' },
          { label: '坐落地址', prop: 'address' },
          { label: '占地面积(m²)', prop: 'area' },
          { label: '总栋数', prop: 'totalBuildings' },
          { label: '总户数', prop: 'totalHomes' },
          { label: '开发商名称', prop: 'developerName' },
          { label: '物业公司', prop: 'propertyCompany' }
        ];
        
        // 导出模板
        ExcelUtil.exportExcel(templateData, '小区信息导入模板', header);
        
        ElMessage.success('模板下载成功');
      } catch (error) {
        console.error('下载模板失败:', error);
        ElMessage.error('下载模板失败: ' + (error.message || '未知错误'));
      }
    },
    
    // 文件选择变更
    handleFileChange(file) {
      this.fileList = [file];
    },
    
    // 提交导入
    async submitImport() {
      if (!this.fileList.length) {
        ElMessage.warning('请选择要导入的Excel文件');
        return;
      }
      
      try {
        this.importing = true;
        
        // 读取Excel文件
        const file = this.fileList[0].raw;
        
        // 定义表头映射
        const header = [
          { label: '小区名称', prop: 'name' },
          { label: '坐落地址', prop: 'address' },
          { label: '占地面积(m²)', prop: 'area' },
          { label: '总栋数', prop: 'totalBuildings' },
          { label: '总户数', prop: 'totalHomes' },
          { label: '开发商名称', prop: 'developerName' },
          { label: '物业公司', prop: 'propertyCompany' }
        ];
        
        // 解析Excel数据
        const importedData = await ExcelUtil.importExcel(file, header);
        
        // 提交到后端
        const formData = new FormData();
        formData.append('file', file);
        
        const response = await axios.post('/api/communities/import', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        
        ElMessage.success(`导入成功，成功导入${response.data.successCount || importedData.length}条数据`);
        this.importDialogVisible = false;
        this.fetchCommunities(); // 刷新列表
      } catch (error) {
        console.error('导入失败:', error);
        ElMessage.error('导入失败: ' + (error.response?.data?.message || error.message || '未知错误'));
      } finally {
        this.importing = false;
      }
    }
  }
};
</script>

<style scoped>
.community-list-container {
  padding: 20px;
  font-size: 16px;
}

/* 统计卡片样式 */
.stats-cards {
  margin-bottom: 20px;
}

.stats-card {
  height: 120px;
  overflow: hidden;
  position: relative;
  transition: all 0.3s;
  border-radius: 12px;
  border: none;
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.stats-card:before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  opacity: 0.5;
}

.stats-content {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 15px;
}

.stats-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-right: 15px;
  color: white;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.stats-icon .el-icon {
  font-size: 32px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}

.total-communities {
  background: linear-gradient(135deg, #1890ff, #36cbcb);
}

.total-buildings {
  background: linear-gradient(135deg, #ff9800, #ff5722);
}

.total-homes {
  background: linear-gradient(135deg, #4caf50, #8bc34a);
}

.recent-added {
  background: linear-gradient(135deg, #9c27b0, #e91e63);
}

.stats-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stats-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 8px;
  font-weight: 500;
}

.stats-value {
  font-size: 32px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
  line-height: 1;
  letter-spacing: 1px;
  font-family: "Arial", sans-serif;
}

.stats-trend {
  font-size: 14px;
  display: flex;
  align-items: center;
}

.trend-up, .trend-down {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.trend-up .el-icon, .trend-down .el-icon {
  font-size: 14px;
  margin-right: 2px;
}

.trend-up {
  color: #67c23a;
}

.trend-down {
  color: #f56c6c;
}

.trend-text {
  margin-left: 5px;
  color: #909399;
}

/* 搜索卡片样式 */
.search-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  border: none;
}

.search-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.card-header:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 20px;
  background: #409EFF;
  border-radius: 2px;
  margin-left: 10px;
}

.header-operations {
  display: flex;
  gap: 10px;
}

.header-operations :deep(.el-button) {
  font-size: 16px;
  height: 42px;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s;
}

.header-operations :deep(.el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.header-operations :deep(.el-icon) {
  font-size: 18px;
  margin-right: 5px;
}

.search-form {
  display: flex;
  align-items: center;
  padding: 20px;
}

.search-form :deep(.el-form-item__label) {
  font-size: 16px;
  font-weight: 500;
}

.search-form :deep(.el-input__wrapper) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.search-form :deep(.el-input__inner) {
  font-size: 16px;
  height: 42px;
}

.search-form :deep(.el-button) {
  font-size: 16px;
  height: 42px;
  padding: 10px 20px;
  border-radius: 8px;
  transition: all 0.3s;
}

.search-form :deep(.el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 表格卡片样式 */
.table-card {
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  border: none;
}

.table-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.table-card :deep(.el-card__header) {
  padding: 15px 20px;
}

.table-card :deep(.el-card__body) {
  padding: 0;
}

.table-card :deep(.el-table) {
  font-size: 16px;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}

.table-card :deep(.el-table th) {
  font-size: 16px;
  padding: 15px 0;
  background-color: #f5f7fa;
  font-weight: 600;
}

.table-card :deep(.el-table td) {
  padding: 15px 0;
}

.table-card :deep(.el-table--border) {
  border: none;
}

.table-card :deep(.el-table--striped .el-table__body tr.el-table__row--striped td) {
  background-color: #fafafa;
}

.table-card :deep(.el-table__row:hover td) {
  background-color: #f0f7ff !important;
}

/* 表格内容样式 */
.community-name {
  display: flex;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
}

.community-name .el-icon {
  margin-right: 8px;
  color: #409eff;
  font-size: 18px;
  background-color: rgba(64, 158, 255, 0.1);
  padding: 6px;
  border-radius: 8px;
}

.address-cell {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  font-size: 16px;
}

.address-cell .el-icon {
  margin-right: 8px;
  color: #ff9800;
  font-size: 18px;
  background-color: rgba(255, 152, 0, 0.1);
  padding: 6px;
  border-radius: 8px;
}

.time-cell {
  display: flex;
  align-items: center;
  font-size: 16px;
}

.time-cell .el-icon {
  margin-right: 8px;
  color: #909399;
  font-size: 18px;
  background-color: rgba(144, 147, 153, 0.1);
  padding: 6px;
  border-radius: 8px;
}

/* 分页样式 */
.pagination-box {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 15px 20px;
}

.pagination-box :deep(.el-pagination) {
  font-size: 16px;
  padding: 0;
  display: flex;
  align-items: center;
}

.pagination-box :deep(.el-pagination__total) {
  font-size: 16px;
}

.pagination-box :deep(.el-pagination .el-select .el-input) {
  width: 120px;
}

.pagination-box :deep(.el-pagination .el-input__wrapper) {
  border-radius: 8px;
}

.pagination-box :deep(.el-pagination .el-input__inner) {
  font-size: 16px;
  height: 36px;
}

.pagination-box :deep(.el-pagination button) {
  font-size: 16px;
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  margin: 0 3px;
  transition: all 0.3s;
}

.pagination-box :deep(.el-pagination button:hover) {
  background-color: #ecf5ff;
  color: #409EFF;
}

.pagination-box :deep(.el-pagination .btn-prev),
.pagination-box :deep(.el-pagination .btn-next) {
  background-color: #f5f7fa;
  border-radius: 8px;
}

.pagination-box :deep(.el-pagination .el-pager li) {
  font-size: 16px;
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  margin: 0 3px;
  transition: all 0.3s;
}

.pagination-box :deep(.el-pagination .el-pager li:hover) {
  background-color: #ecf5ff;
}

.pagination-box :deep(.el-pagination .el-pager li.active) {
  background-color: #409EFF;
  color: white;
  font-weight: bold;
}

/* 按钮样式调整 */
:deep(.el-button--text) {
  font-size: 16px;
}

:deep(.el-button) {
  font-size: 16px;
}

:deep(.el-tag) {
  font-size: 14px;
  padding: 2px 8px;
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
  .stats-cards .el-col {
    width: 50%;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 768px) {
  .stats-cards .el-col {
    width: 100%;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-form .el-form-item {
    margin-right: 0;
    margin-bottom: 15px;
  }
}

/* 导入导出相关样式 */
.import-dialog-content {
  padding: 10px 0;
}

.template-download {
  margin-bottom: 20px;
  text-align: center;
}

.excel-upload {
  text-align: center;
}

.el-upload__tip {
  margin-top: 10px;
  font-size: 14px;
  color: #909399;
}
</style>
